<template>
  <div class="w750 white-bg">
    

    <!-- <Loading
      @reLoad="getsearchList(params)"
      :showNoNetwork="showNoNetwork"
      :showLoading="readyType"
    > -->
      <div :class="themes.theme">
        <div class="search-list" :class="themes.theme" v-if="searchArr.length">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check="false"
          >
          

            <!-- 横向列表 -->
            <div class="pro-list" id="list02">
              <ProList
                @myEvent="enterGoods"
                :parmas="item"
                :pic="item.pic"
                :name="item.name"
                :money="item.price"
                v-for="(item, index) in searchArr"
                :key="index"
              >
              </ProList>
            </div>
            <!-- 横向列表 -->
          </van-list>
        </div>
        <Noempty
          v-if="noneResult"
          :pic="require('../../assets/images/order-empty.png')"
          :title="'暂无列表信息'"
        />
      </div>
    <!-- </Loading> -->
  </div>
</template>

<script>
import Noempty from "components/Noempty/Noempty";
import { mapState } from "vuex";
import ProList from "components/proList/proList";
import SearchCon from "components/proList/searchCon";
import Loading from "components/loading/loading";
import { store } from "utils/Cache";
import { groupProdList } from "api/search";
export default {
  data() {
    return {
      goodsType: true, //默認-纵向列表
      searchArr: [], //搜索列表数据
      readyType: false, // 是否加载中，  默认加载中
      showNoNetwork: false, //是否有网络才显示  --  默认不显示
      loading: false, //vant组件的参数
      finished: false, //vant组件的参数
      page: 1,
      params: {
        // 搜索接口参数
        curPageNO: 1,
        prodGroupId: ""
      },
      noneResult: false, //无数据显示暂无数据的图片
      name: this.$route.query.name
    };
  },
  mounted() {
    if (this.$route.query.prodGroupId) {
      this.params.prodGroupId = this.$route.query.prodGroupId;
      this.getsearchList(this.params);
    }
  },
  methods: {
    goback() {
      this.$router.back();
      this.$router.isBack = true;
    },
    //商品列表切换模式
    changeType() {
      this.goodsType = !this.goodsType;
    },
    enterGoods(event) {
      let goodsInfoId = event.prodId;
      this.$router.push({
        path: `/goodsDetail`,
        query: {
          goodsInfoId: goodsInfoId
        }
      });
    },
    //获取列表数据
    getsearchList(params) {
      this.readyType = true;
      this.showNoNetwork = false;
      groupProdList(params)
        .then(res => {
        //   this._hideLoadingCenter();
          if (res.status == 1) {
            this.searchArr = res.result.resultList;
            this.setTotal(res.result.total);
          } else {
            this.setTotal(0);
          }
        })
        .catch(e => {
           this.setTotal(0);
           this.readyType = false;
           this.showNoNetwork = true;
        //   this.showNoNetwork = true;
        //   this._hideLoadingCenter();
        }).finally(() => {
            this.readyType = false;
            this.showNoNetwork = true;
        })
    },
    //加载更多
    onLoad() {
      setTimeout(() => {
        if (this.searchArr.length >= this.total) {
          this.loading = false;
          this.finished = true;
        } else {
          this.page = this.page + 1;
          this.params.curPageNO = this.page;
          groupProdList(this.params).then(res => {
            for (let i = 0; i < res.result.resultList.length; i++) {
              this.searchArr.push(res.result.resultList[i]);
            }
            // 加载状态结束
            this.loading = false;
          });
        }
      }, 500);
    },
    //设置setTotal
    setTotal(total) {
      this.total = total;
      if (total == 0) {
        this.noneResult = true;
      }
    },
    _showLoadingCenter() {
      this.readyType = true;
    },

    _hideLoadingCenter() {
      this.readyType = false;
    }
  },
  computed: {
    ...mapState(["themes"])
  },
  components: {
    ProList,
    SearchCon,
    Loading,
    Noempty
  }
};
</script>

<style src="../../assets/css/search.css" scoped></style>
<style src="../../assets/css/style/list-style.css" scoped></style>
<style scoped>
.mar {
  margin: 7px 10px 7px 0 !important;
}
.search-list {
  padding-top: 0px;
}
.pro-list {
  background: #f8f8f8;
}
</style>
